<template>
  <div class="log-page">
    <el-card shadow="always" class="log-search-bar">
      <el-form :inline="true" :model="form" label-width="80px" class="log-form">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="排序字段">
              <el-select v-model="form.orderBy" placeholder="请选择排序" style="width:180px">
                <el-option label="字段顺序" :value="0" />
                <el-option label="按时间排序" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始时间">
              <el-date-picker v-model="form.begin" type="datetime" placeholder="开始时间" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间">
              <el-date-picker v-model="form.end" type="datetime" placeholder="结束时间" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input v-model="form.username" placeholder="用户名" clearable style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top:0">
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" placeholder="昵称" clearable style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方法名">
              <el-input v-model="form.methodName" placeholder="方法名" clearable style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-input v-model="form.state" placeholder="状态" clearable style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top:8px">
          <el-col :span="24" style="text-align:right">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset" style="margin-left:8px">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="always" class="log-table-card">
      <el-table :data="logList" border stripe highlight-current-row style="width: 100%">
        <el-table-column prop="id" label="ID" width="70" align="center" />
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column prop="nickname" label="昵称" min-width="100" />
        <el-table-column prop="methodName" label="方法名" min-width="120" />
        <el-table-column prop="state" label="状态" min-width="80" />
        <el-table-column prop="createTime" label="创建时间" min-width="160" />
      </el-table>
      <div style="margin-top:8px;text-align:right;">
        <el-pagination
          background
          layout="prev, pager, next, jumper, ->, total"
          :total="total"
          :page-size="form.pageSize"
          :current-page="form.pageNum"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const form = reactive({
  orderBy: 0,
  begin: '',
  end: '',
  pageNum: 1,
  pageSize: 10,
  username: '',
  nickname: '',
  methodName: '',
  state: ''
});
const logList = ref([]);
const total = ref(0);

const fetchLogs = async () => {
  try {
    const params = { ...form };
    // 转换时间为字符串（如有需要）
    if (params.begin instanceof Date) params.begin = params.begin.toISOString();
    if (params.end instanceof Date) params.end = params.end.toISOString();
    const res = await axios.get('/comfyui/logs', { params });
    // 假设后端返回 { code, msg, data: { records: [], total: 100 } }
    logList.value = res.data?.data?.records || res.data?.data?.list || [];
    total.value = res.data?.data?.total || 0;
  } catch (e) {
    ElMessage.error('获取日志失败');
  }
};

const handleSearch = () => {
  form.pageNum = 1;
  form.pageSize = 10;
  fetchLogs();
};
const handleReset = () => {
  form.orderBy = 0;
  form.begin = '';
  form.end = '';
  form.pageNum = 1;
  form.pageSize = 10;
  form.username = '';
  form.nickname = '';
  form.methodName = '';
  form.state = '';
  fetchLogs();
};
const handlePageChange = (val: number) => {
  form.pageNum = val;
  fetchLogs();
};
</script>

<style scoped>
.log-page {
  padding: 16px 0 0 0;
}
.log-search-bar {
  margin-bottom: 18px;
  border-radius: 10px;
  box-shadow: 0 2px 8px #f0f1f2;
  background: #fff;
}
.log-form {
  padding: 8px 0 0 0;
}
.log-table-card {
  border-radius: 10px;
  box-shadow: 0 2px 8px #f0f1f2;
  background: #fff;
}
.el-table {
  border-radius: 8px;
  overflow: hidden;
}
</style> 